<template>
  <vxe-grid
    ref="tableRef"
     size="medium"
    :export-config="{}"
    @scroll="scrollEvent"
    :scroll-y="{ gt: 200 }"
    @toolbar-button-click="toolbarButtonClickEvent"
    @current-change="currentChange"
    v-bind="gridOptions"
  >
  </vxe-grid>
</template>
<script>
export default {
  props: {
    tableHeight: {
      type: Number | String,
      default: "auto",
    },
    columnsList: {
      //列表数据
      type: Array,
      default() {
        return [];
      },
    },
    data: {
      //列表数据
      type: Array,
      default() {
        return [];
      },
    },
    currentRow:{
       //选中当前行
      type: Number,
      default() {
        return 0;
      }
    },
    toolbarConfig:{
       //选中当前行
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  computed: {
    gridOptions() {
      return {
        border: true,
        resizable: true,
        showOverflow: true,
        highlightCurrentRow: true,
        height: this.tableHeight,
        align: "left",
        columns: this.columnsList,
        data: this.data,
        toolbarConfig:this.toolbarConfig? {
            buttons:this.data.length>0?[
              { code: 'location', name: '解析位置', icon: 'el-icon-location-outline', status: 'success' }
            ]:[],
            refresh: false,
            import: false,
            export: true,
            print: true,
            zoom: true,
            custom: true
        }:false,
      };
    },
  },
  watch:{
    currentRow(){
        this.$refs.tableRef.scrollToRow(this.data[this.currentRow])
       this.$refs.tableRef.setCurrentRow(this.data[this.currentRow])
    }
  },
  mounted() {},
  methods: {
    currentChange(data) {
      this.$emit("currentChange", data.row);
      this.$emit("changeIndex", data.rowIndex);
    },
    scrollEvent({ scrollTop, scrollLeft }) {},
    btnExport(){
       this.$refs.tableRef.openExport()
     },
     toolbarButtonClickEvent(code){
       this.$emit('toolbarButtonClickEvent',code)
     }
  },
};
</script>
